<template>
  <div id="login" class = "login" @keydown.enter="onLogin">
      <!-- 登录框 -->
      <div class="box">
          <h4>毕业生数据可视化系统</h4>
          <el-form ref="form" :model="form" label-width="80px">
            <div class="item" :class="[ index === 1 ? 'focus_item' : '' ]">
                <span class="iconfont lefticon icon-yonghu"></span>
                <div @click="focus(1)">
                    <el-input v-model="form.name" autofocus></el-input>
                </div>
            </div>
            <div class="item" :class="[ index === 2 ? 'focus_item' : '' ]">
                <span class="iconfont lefticon icon-mima"></span>
                 <div @click="focus(2)">
                    <el-input v-model="form.password" :type="canSee ? 'password' : 'text'"></el-input>
                 </div>
                <span class="iconfont righticon icon-yanjing" @click="changeType"></span>
            </div>
            <div class="item" :class="[ index === 3 ? 'focus_item' : '' ]">
                <span class="iconfont lefticon icon-mima1"></span>
                <div @click="focus(3)">
                    <el-input v-model="form.vCode"></el-input>
                </div>
                <div class = "v_code">
                    <img src="../assets/img/vCode.jpg" id="verifyimg" alt="验证码" @click="changeCode" title="看不清楚，换一张">
                </div>
            </div>
            <el-button type="primary" class = "full_btn"  @click="onLogin">登录</el-button>
          </el-form>
      </div>
      <!-- 脚注 -->
      <div class="footnote">
        <p>浏览器推荐使用：谷歌(Chrome)、火狐(Firefox)、360(极速模式)、Microsoft Edge、IE10(以上)版本,大于1440X900分辩率！</p>
        <p>Copyright © 2021 yaozefeng . All rights reserved.</p>
      </div>
  </div>
</template>

<script>
import { _login, _getCode } from '../network/login.js'

export default {
    name: 'login',
    data() {
      return {
        form: {
          name: 'admin',
          password: '123456',
          vCode: ''
        },
        canSee: true,
        index: 0
      }
    },
    mounted () {
        this.changeCode()
    },
    methods: {
        onLogin () {
            if(this.form.name === ''){
                this.$message.error('请输入用户名')
                return false
            }
            if(this.form.password === ''){
                this.$message.error('请输入密码')
                return false
            }
            if(this.form.vCode === ''){
                this.$message.error('请输入验证码')
                return false
            }
            if(this.form.vCode.length !== 4){
                this.$message.error('验证码位数错误')
                return false
            }
            _login(this.form.name, this.form.password, this.form.vCode).then(res => {
                if(res.data.code === 200){
                    this.$message.success('登录成功')
                    
                    localStorage.setItem('power',res.data.data.power)
                    localStorage.setItem('userName',this.form.name)
                    localStorage.setItem("token",res.data.data.token)
                    this.$router.push('/page')
                }
                else{
                    this.$message.error(res.data.msg)
                }
            }).catch(res => {
                this.$message.error('登录失败，请联系管理员')
            })      
        },
        changeType () {
            this.canSee = !this.canSee
        },
        /* 根据获取的焦点让用户知晓点击了哪个输入框项 */
        focus (index) {
            this.index = index
        },
        timestamp (url) {
            var getTimestamp = new Date().getTime()
            if (url.indexOf("?") > -1) {
                url = url + "&timestamp=" + getTimestamp
            } else {
                url = url + "?timestamp=" + getTimestamp
            }
            return url
        },
        changeCode () {
            document.getElementById("verifyimg").src = this.timestamp("http://localhost:8088/user/verifyCode")
        }
    }
}
</script>

<style>
.item .el-input{
    padding-left: 30px;
}
.item .el-input__inner{
    height: 50px;
    line-height: 50px;
    border: 0;
}
</style>
<style scoped>
.login{
   width: 100%;
   height: 100%;
}
.box{
    position: relative;
    top: 50%;
    width: 400px;
    padding: 40px;
    margin: 0 auto;
    transform: translateY(-50%);
}
.box h4{
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    color: #409eff;
}
.item{
    position: relative;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    border-radius: 3px;
}
.focus_item{
    border-color: #409eff;
}
.item .iconfont{
    position: absolute;
    top: 0;
    width: 20px;
    height: 50px;
    line-height: 50px;
}
.item .lefticon{
    left: 12px;
}
.item .righticon{
    right: 12px;
}
.item .v_code{
    position: absolute;
    right: 5px;
    top: 5px;
    width: 100px;
    height: 40px;
}
.item .v_code img{
    width: 100%;
    height: 100%;
}
.full_btn{
    width: 100%;
}
/* 脚注 */
.footnote{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(27,33,35,0.8);
    font-size: 12px;
    color: #cecece;
    padding: 10px 0;
    text-align: center;
    line-height: 18px;
}
</style>
